<template>
  <div class="order">

    <div class="order_notes">重要：请确保一下信息的真实一致性，一经提交，以上信息将无法更改！</div>
    <ul>
      <li>投保人 <span>{{name}}</span></li>
      <li>身份证号 <span>{{idcard}}</span></li>
      <li>性别 <span>{{sexname}}</span></li>
      <li>手机号 <span>{{mobile}}</span></li>
    </ul>

    <div class="order_pay">
      还需要支付：
      <p><span>{{price}}</span>元</p>
    </div>
    <div class="zhifubao">
      <!--<img class="zf" src="../image/zfb.jpg"/>-->
      <div>

        <img src="../image/zf.jpg" class="zfbimg"/>
        <div class="item">
          <div class="zfbtext"><p>支付宝</p> <img class="recommend" src="../image/recommend.jpg"/></div>
          <div class="use">数亿用户都在用，安全可托付</div>
        </div>
      </div>
      <div>

        <img class="zfok" src="../image/ok.jpg"/></div>
    </div>
    <button class="paybtn" @click="orderpay">
      确认无误并支付
    </button>
  </div>
</template>
<script>
  import api from '../api'
  import js from  '../js/dom.js'
  export default {
    data(){
      return {
        policy_order: '',
        order_id: "",
        idcard:'',
        mobile:'',
        name:'',
        price:'',
        sexname:'',
        sex:''
      }
    },
    created(){
      this.policy_order = this.$route.query.policy_order
      this.order_id = this.$route.query.order_id

      this.$axios.post(api.confirm_order(), {policy_order: this.policy_order, order_id: this.order_id}).then(
        res => {
          console.log(res);
          let data = res.data.data
//          this.policy_order = data.policy_order
//          this.order_id= data.order_id
          this.idcard= data.idcard
          this.mobile= data.mobile
          this.name= data.name
          this.price= data.price
          this.sex= data.sex
          if (this.sex == 1){
              this.sexname ='男'
          }else{
              this.sexname ='女'
          }
        },
        err => {
          console.log(err);
        }
      )
    },
    methods: {
      orderpay(){
        this.$axios.post(api.orderpay(), {policy_order: this.policy_order, order_id: this.order_id}).then(
          res => {
            document.body.appendChildPlus(res.data)
//            const D = document.createElement('div') // 创建div
//            D.innerHTML = res.data // 将返回的form 放入div
//            document.body.appendChild(D)
//            document.forms['alipaysubmit'].submit();

          },
          err => {
            console.log(err);
          }
        )

      }
    },
    computed: {},
    components: {}
  }
</script>
<style scoped lang="less">
  .order_notes {
    font-size: 12px;
    color: #ff6600;
    padding: 16px 0;
    border-bottom: 1px solid #ececec;
    text-align: center;

  }

  li {
    text-indent: 18px;
    height: 56px;
    border-bottom: 1px solid #ececec;
    line-height: 56px;
    font-size: 15px;
    color: #585858;
    span {
      float: right;
      margin-right: 18px;
      color: #a3a3a3;
    }
  }

  ul {
    border-bottom: 10px solid #f2f2f2;
  }

  .order_pay {
    border-bottom: 1px solid #ececec;
    height: 55px;
    text-indent: 18px;
    line-height: 55px;
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    color: #a3a3a3;
    p {
      width: auto;
      margin-right: 18px;
      color: #5b5b5b;
      span {
        color: #ff6600;
        font-size: 20px;
      }
    }
  }

  .zhifubao {
    width: 100%;
    border-bottom: 1px solid #ececec;
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
    }
    .zfbimg {
      width: 43px;
      float: left;
      margin-left: 18px;
      margin-right: 12px;
    }
    .zfok {
      margin-right: 18px;
      width: 20px;
      margin-top: 11px;
    }
    .zfbtext {
      width: auto;
      float: left;
      font-size: 17px;
      p {
        width: auto;
        float: left;
        margin-right: 7px;

      }
      img {
        margin-top: 3px;
      }
    }
    .recommend {
      width: 35px;
    }
    .zf {
      width: 100%;
    }
    .use {
      width: auto;
      color: #a0a0a5
    }
  }

  .paybtn {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 47px;
    font-size: 15px;
    line-height: 47px;
    text-align: center;
    color: #fff;
    background-color: #0098ef;
    margin-top: 38px;
    border-radius: 23px;
  }
</style>
